<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;background-color: #fff;border-radius: 10px;">
      <div class="title"
        style="text-align: left;margin-left: 30px;margin-top:30px;border-left: 3px solid #fe0100;width: 100px;height: 25px;">
        <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">新建客户</h3>
      </div>
      <div class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
        <el-form ref="data" :model="data" label-width="130px">
          <el-form-item label="客户名称">
            <el-input v-model="data.username"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="客户类型">
            <el-select v-model="data.customType" placeholder="请选择客户类型" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="item1 in dictList1" :key="item1.dictId" :label="item1.dictKey" :value="item1.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-input v-model="data.customSource"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="单位星级">
            <el-rate style="margin-top: 10px;" v-model="data.grade"></el-rate>
          </el-form-item>
          <el-form-item label="所属行业">
            <el-select v-model="data.industry" placeholder="请选择行业" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;" @change="getDepartmentList()">
              <el-option v-for="item1 in industryList" :key="item1.dictId" :label="item1.dictValue"
                :value="item1.dictValue">
              </el-option>
            </el-select>
            <i @click="dialogFormVisible2 = true" class="el-icon-plus"
              style="position: absolute;top: 15px;left: 320px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
          </el-form-item>
          <el-form-item label="单位类型">
            <el-select v-model="data.departmentType" placeholder="请选择单位类型" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item2,index1) in departmentList" :key="item2.index1" :label="item2.dictValue"
                :value="item2.dictValue">
              </el-option>
            </el-select>
            <i @click="dialogFormVisible3 = true" class="el-icon-plus"
              style="position: absolute;top: 15px;left: 320px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input v-model="data.company"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="区域">
            <el-select v-model="data.province" placeholder="请选择省份" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"
              @change="getCityList()">
              <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>
            <i @click="dialogFormVisible = true" class="el-icon-plus"
              style="position: absolute;top: 15px;left: 320px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
            <el-select v-model="data.city" placeholder="请选择市" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item,index) in cityList" :key="item.index" :label="item.dictValue"
                :value="item.dictValue"></el-option>
            </el-select>
            <i @click="dialogFormVisible1 = true" class="el-icon-plus"
              style="position: absolute;top: 70px;left: 320px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
          </el-form-item>
         
          <el-form-item label="地址">
            <el-input v-model="data.adress"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="data.phone"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="data.information" type="textarea" autosize
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 10px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addStaffy" type="danger" class="button">确定</el-button>
            <el-button @click="cancel" type="danger" class="button">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 添加行业弹框 -->
      <el-dialog :visible.sync="dialogFormVisible2">
        <el-form v-model="industryData">
          <el-form-item>
            <el-input v-model="industryData.dictValue" autocomplete="off" placeholder="请添加行业"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 10px;overflow: hidden;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false" type="danger" class="button">取 消</el-button>
          <el-button type="danger" class="button" @click="addIndustry">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加单位类型弹框 -->
      <el-dialog :visible.sync="dialogFormVisible3">
        <el-form v-model="departmentData">
          <el-select v-model="industryData.dictValue" placeholder="请选择行业"
            style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
            <el-option v-for="item in industryList" :key="item.dictId" :label="item.dictValue" :value="item.dictValue">
            </el-option>
          </el-select>
          <el-form-item placeholder="请添加单位类型">
            <el-input v-model="departmentData.departmentData" autocomplete="off"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false" type="danger" class="button">取 消</el-button>
          <el-button @click="addDepartment" type="danger" class="button">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加省弹框 -->
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form v-model="dictData">
          <el-form-item>
            <el-input v-model="dictData.dictKey" autocomplete="off" placeholder="请添加省会"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 10px;overflow: hidden;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" type="danger" class="button">取 消</el-button>
          <el-button @click="addDict" type="danger" class="button">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加市弹框 -->
      <el-dialog :visible.sync="dialogFormVisible1">
        <el-form v-model="cityData">
          <el-select v-model="dictData.dictKey" placeholder="请选择省份"
            style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
            <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey">
            </el-option>
          </el-select>
          <el-form-item placeholder="请添加市">
            <el-input v-model="cityData.dictValue" autocomplete="off"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false" type="danger" class="button">取 消</el-button>
          <el-button @click="addCity" type="danger" class="button">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisible1: false,
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        dataTable: [],
        dictList: [],
        cityList: [],
        dictList1: [],//客户类型列表
        industryList: [],  //行业
        departmentList:[],  //单位类型
        current: 1,
        size: 100,
        data: {
          adress: '',
          userType: '2',
          username: '',
          phone: '',
          company: '',
          email: '',
          information: '',
          industry: '',
          grade: '',
          province: '',
          city: '',
          customType: '',
          customSource: '',
          departmentType: ''
        },
        industryData: {
          dictVar: 'industry',
          dictKey: '',
          dictValue: '',
        },
        departmentData: {
          dictVar: '',
          dictKey: '',
          dictValue: '',
        },
        dictData: {
          dictVar: 'province',
          dictKey: '',
          dictValue: '',
        },
        cityData: {
          dictVar: '',
          dictKey: '',
          dictValue: '',
        },
      }
    },
    mounted() {
      this.getDictList()
      this.getDictList1()
      this.getIndustryList()
      // this.getDepartmentList()
    },
    methods: {
      cancel() {
        this.$router.push({
          path: '/custem'
        });
      },

      // 获取客户类型列表
      async getDictList1() {
        // 解构出参数    
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'CustomType'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.dictList1 = result.data.data

      },
      //行业
      async getIndustryList() {
        // 解构出参数
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result = await this.$API.dict.reqDictList(data)
        this.industryList = result.data.data

      },
      //单位类型      
      async getDepartmentList() {
        // 解构出参数
        this.data.departmentType = ''
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: this.data.industry
        }
        let result = await this.$API.dict.reqDictList(data)
        this.departmentList = result.data.data
      },
      //  添加行业
      addIndustry() {
        // 解构出参数        
        var data = this.industryData;
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");          
            this.dialogFormVisible2 = false;
            this.getIndustryList();
            // this.reload();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },      
      //  添加单位类型
      addDepartment() {
        // 解构出参数        
        var data = this.departmentData;
        this.departmentData.dictVar = this.industryData.dictValue
        this.departmentData.dictKey = this.departmentData.dictValue
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible3= false;
            this.reload();
            this.getDepartmentList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      // 获取省列表
      async getDictList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'province'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.dictList = result.data.data

      },
      // 获取市列表
      async getCityList() {
        // 解构出参数
        this.data.city = ''
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: this.data.province
        }
        let result = await this.$API.dict.reqDictList(data)
        this.cityList = result.data.data
      },
      //  添加省
      addDict() {
        // 解构出参数 
        var data = this.dictData;
        this.dictData.dictValue = this.dictData.dictKey
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible = false;
            this.reload();
            this.getDictList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      //  添加市
      addCity() {
        // 解构出参数        
        var data = this.cityData;
        this.cityData.dictVar = this.dictData.dictKey
        this.cityData.dictKey = this.cityData.dictValue
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible1 = false;
            this.reload();
            this.getCityList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      // 添加客户
      async addStaffy() {
        // 解构出参数
        if (this.data.username == '') {
          this.$message("请输入用户名")
        } else {
          const { userType, adress, username, phone, company, email, information, industry, grade, province, city, customType, customSource } = this.data;
          var data = {
            userType: userType,
            adress: adress,
            username: username,
            phone: phone,
            company: company,
            email: email,
            information: information,
            industry: industry,
            grade: grade,
            province: province,
            city: city,
            customType: customType,
            customSource: customSource
          }
          let result = await this.$API.user.reqAddStaffy(data);
          // console.log(result)
          this.$message.success("添加成功！");
          // this.reload();this.$message.success("添加成功！");
          this.dataTable = result.data.data
          this.$router.push({ path: '/custem' });

        }
      },
    },
  }
</script>
<style scoped>
  @import "../../../style/style.css";

  .bx>>>.el-form-item__content {
    width: 300px !important;
    /* border: 1px solid #000; */
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 200px !important;
  }

  .bx>>>.el-input__suffix {
    left: 150px;

  }

  .bx>>>.el-form-item {
    margin-bottom: 10px;
  }
</style>